<template>
    <div class="login-container">
        <div class="login animate__animated animate__zoomIn">
            <div class="logo">后台登录</div>
            <el-form ref="ruleForm" :model="form" :rules="rules">
                <el-form-item prop="username">
                    <el-input size="large" placeholder="账号" :prefix-icon="User" v-model="form.username" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="large" placeholder="密码" type="password" :prefix-icon="Lock" v-model="form.password" />
                </el-form-item>
                <el-button :loading="loading" size="large" type="primary" auto-insert-space @click="submitForm"
                    style="width: 100%;">登录</el-button>
            </el-form>
        </div>
        <div class="square">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="circle">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import Request from '@/request'

const route = useRoute()
const router = useRouter()

const ruleForm = ref()

const form = ref({
    username: '360060316',
    password: '360060316'
})

const loading = ref(false)

const rules = ref({
    username: [
        {
            required: true,
            message: '请输入账号！',
            trigger: ['blur', 'change']
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码！',
            trigger: ['blur', 'change']
        }
    ]
})


const submitForm = () => {
    if (!ruleForm) return

    ruleForm.value.validate((valid) => {
        if (valid) {
            loading.value = true
            Request
                .post('system/index/login', form.value)
                .then(res => {
                    loading.value = false
                    if (res.datas.token) {
                        localStorage.setItem('token', 'Bearer ' + res.datas.token)
                        ElMessage({
                            showClose: true,
                            message: '登录成功！',
                            type: 'success',
                            onClose: () => {
                                let redirect = route.query.redirect
                                if (redirect == undefined) {
                                    redirect = '/'
                                }
                                router.push(redirect)
                            },
                        });
                    } else {
                        ElMessage.error(res.message)
                        localStorage.removeItem('token')
                    }
                })
                .catch((error) => {
                    console.log('error', error)
                })
        }
    })
}
</script>
<style scoped>
.login-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
}

.logo {
    font-size: 18px;
    margin-bottom: 40px;
    text-align: center;
}

.login {
    width: 335px;
    padding: 30px;
    background-color: #ffffffc8;
    border-radius: 5px;
    box-shadow: var(--el-box-shadow-light);
    z-index: 999;
}

ul li {
    /* 绝对定位 */
    position: absolute;
    border: 1px solid #fff;
    background-color: #fff;
    width: 30px;
    height: 30px;
    list-style: none;
    opacity: 0;
}

.square li {
    top: 40vh;
    left: 60vw;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: square 10s linear infinite;
}

.square li:nth-child(2) {
    top: 80vh;
    left: 10vw;
    /* 设置动画延迟时间 */
    animation-delay: 2s;
}

.square li:nth-child(3) {
    top: 80vh;
    left: 85vw;
    animation-delay: 4s;
}

.square li:nth-child(4) {
    top: 10vh;
    left: 70vw;
    animation-delay: 6s;
}

.square li:nth-child(5) {
    top: 10vh;
    left: 10vw;
    animation-delay: 8s;
}

.circle li {
    bottom: 0;
    left: 15vw;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: circle 10s linear infinite;
}

.circle li:nth-child(2) {
    left: 35vw;
    /* 设置动画延迟时间 */
    animation-delay: 2s;
}

.circle li:nth-child(3) {
    left: 55vw;
    animation-delay: 6s;
}

.circle li:nth-child(4) {
    left: 75vw;
    animation-delay: 4s;
}

.circle li:nth-child(5) {
    left: 90vw;
    animation-delay: 8s;
}

/* 定义动画 */
@keyframes square {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
    }
}

@keyframes circle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }

    100% {
        transform: scale(5) rotate(1000deg);
        opacity: 0;
        bottom: 90vh;
        border-radius: 50%;
    }
}
</style>